<!-- Dom模板 -->
<template>
  <div class="classify_box">
    <!-- Dom内容 -->
    <div class="classify">
      <van-icon name="arrow-left" @click="back" />
      <div class="name">{{ this.$router.currentRoute.query.name }}</div>
      <div></div>
    </div>
    <div class="top">
      <div
        :class="nowindex === item.num ? 'top_list active' : 'top_list'"
        v-for="(item, index) in list"
        :key="index"
        @click="active(item,index)"
        ref="top"
      >
        <span class="z">{{ item.name }}</span>
        <div class="xx" v-if="item.type">
          <i class="icon iconfont">&#xeb04;</i>
          <i class="icon iconfont">&#xeb05;</i>
        </div>
      </div>
    </div>

    <div class="main">
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
        style="min-height: 100%;"
      >
        <div
          class="main_list"
          v-for="(item, index) in goods"
          :key="index"
          @click="details(item)"
        >
          <img :src="item.goods_url" alt="" />
          <p>{{ item.goods_name }}</p>
          <span>￥{{ item.price }}</span
          ><span
            style="
              text-decoration: line-through;
              font-size: 13px;
              margin-left: 4%;
              color: rgba(0, 0, 0, 0.54);
            "
            >原价￥{{ item.goods_original }}</span
          >
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import "../../components/font_ss/iconfont";
import * as api from "../../components/api/shmily";
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      list: [
        { name: "综合", type: false, num: 0 },
        { name: "销量", type: false, num: 1 },
        { name: "价格", type: true, num: 2 },
      ],
      nowindex: 0,
      goods: [],
      isLoading: false,
      price: false,
    };
  },
  //组件的挂载
  components: {},
  // Vue方法定义
  methods: {
    back() {
      this.$router.history.go(-1);
    },
    active(item) {
      this.nowindex = item.num;
      this.price = !this.price;
      this.gonggong();
    },
    details(item) {
      this.$router.push({
        path: "/details",
        query: item,
      });
    },
    // 获取数据
    getShopping() {
      let goods_typeid = Number(this.$router.currentRoute.query.typeid);
      api.getshopping({ goods_typeid }).then((res) => {
        this.goods = res.data;
      });
    },
    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.gonggong();
      }, 500);
    },
    gonggong() {
      if (this.nowindex == 0) {
        this.getShopping();
      } else if (this.nowindex == 1) {
        this.goods = this.goods.sort(this.compare("goods_people"));
        console.log(this.goods);
      } else if (this.nowindex == 2) {
        if (this.price == false) {
          this.goods = this.goods.sort(this.compare("price"));
        } else if (this.price == true) {
          this.goods = this.goods.sort(this.compars("price"));
        }
      }
    },
    // 降序
    compare(prop) {
      return function (a, b) {
        let value1 = a[prop];
        let value2 = b[prop];
        return value2 - value1;
      };
    },
    // 升序
    compars(prop) {
      return function (a, b) {
        let value1 = a[prop];
        let value2 = b[prop];
        return value1 - value2;
      };
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getShopping();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 生命周期 - 数据更新完成（访问DOM元素）
  updated() {},
  // 生命周期 - 组件销毁
  destroyed() {},
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
@import url("../../components/font_ss/iconfont.css");
.classify_box {
  width: 100%;
  height: 100%;
}
.classify {
  width: 100%;
  height: 7%;
  border-bottom: 2px solid rgba(238, 238, 238, 100);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.van-icon {
  margin-top: 2%;
  font-size: 32px;
  float: left;
}
.name {
  font-size: 20px;
  float: left;
}
.top {
  width: 100%;
  height: 7%;
  border-bottom: 2px solid rgba(238, 238, 238, 100);
  float: left;
}
.top_list {
  width: calc(100% / 3);
  height: 100%;
  float: left;
  text-align: center;
  line-height: 3rem;
  position: relative;
}
.main {
  width: 100%;
  height: calc(100% - 7%);
  overflow: auto;
  padding-right: 1%;
  padding-left: 3%;
  padding-bottom: 19%;
  position: fixed;
  top: 13%;
  left: 0;
  z-index: 33;
  background: white;
}
.main_list {
  width: 48%;
  height: 38%;
  float: left;
  margin-right: 2%;
  margin-top: 3%;
  margin-bottom: 4%;
}
.main_list img {
  width: 100%;
  height: 65%;
  margin-bottom: 4%;
}
.main_list p {
  font-size: 12px;
  margin-bottom: 2%;
}
.main_list span {
  color: #ff6700;
}
/*滚动条样式*/
.main::-webkit-scrollbar {
  width: 0px;
}
.icon {
  margin-left: -13px;
  width: 0;
  height: 0;
}
.z {
  display: inline-block;
}
.active {
  color: #ff6700;
}
.xx {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 22222;
}
</style>